<nav>
  <a class="link" href="/">home</a>
  <a class="link" href="/a">a</a>
  <a class="link" href="/c">c</a>
</nav>
<section id="home">
  <h1>home</h1>
  <p>This is home page</p>
</section>
<section id="a">
  <h1>a</h1>
  <p>This is a page</p>
</section>
<section id="default">
  <h1>404</h1>
  <p>404</p>
</section>

<script>

  class Router {
    constructor({ mode, routes }) {
      this.routes = routes
      window.onhashchange = () => this.setPage()
      document.querySelectorAll('.link').forEach(node => {
        node.addEventListener('click', (e) => {
          location.hash = node.pathname
          e.preventDefault()
        })
      })
      this.setPage()
    }

    setPage() {
      this.routes.forEach(route => route.component.style.display = "none")
      let route = this.routes.find(route => '#' + route.path ===  location.hash) || this.routes[this.routes.length - 1]
      route.component.style.display = "block"
    }

  }


  new Router({
    mode: 'hash',
    routes: [
      {
        path: '/',
        component: document.querySelector('#home')
      },
      {
        path: '/a',
        component: document.querySelector('#a')
      },
      {
        component: document.querySelector('#default')
      },
    ]
  })


</script>